<template>
	<div>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-media" style="margin-left: 10px;">
				<a href="javascript:;">
					<div class="touxiangmingzi" style="width: 150px;">
						<div class="touxiang">
							<!--<img style="border-radius:50%;height: 80px;width: 80px;" src="../../assets/touxiang.png">-->
							<img class="userHead" :src="$store.state.user.userHead">
						</div>
						<h3>{{ $store.state.user.name }}</h3>
						<a href="javascript:;" @click="handleToLogout">退出</a>
					</div>
					<!--<p class='mui-ellipsis'>自我描述</p>-->
					<div style="margin-top: 10px;">
						<a>关注 <span>13</span></a>
                  		<a>喜欢 <span>66</span></a>
                  		<a>粉丝 <span>1000</span></a>
					</div>
				</a>
			</li>
		</ul>
		<!--<router-link to="edit">
			<mt-button class="btn btn-success" plain size="large">修改个人档案</mt-button>
		</router-link>-->
		
		<input type="file" name="file" value="上传头像" @change="handleToUpload">
		
		<navbar></navbar>
		
	</div>
</template>

<script>
import Navbar from '../public/Navbar.vue';
import { messageBox } from '@/components/JS';
import axios from 'axios';
    export default {
        //2.然后,在components中写入子组件
        components: {Navbar},
        methods:{
		handleToLogout(){
			this.axios.get('/api2/users/logout').then((res)=>{
				var status=res.data.status;
				if(status===0){
					this.$router.push('/login');
				}
			});
		},
	
		handleToUpload(ev){
	            var file = ev.target.files[0];
	            var param = new FormData();
	            param.append('file' , file , file.name);
	            var config = {
	                headers : {
	                    'Content-Type' : 'multipart/form-data'
	                }
	            };
	
	            this.axios.post('/api2/users/uploadUserHead',param , config).then((res)=>{
	                var status = res.data.status;
	                var This = this;
	                if( status === 0 ){
	                    messageBox({
	                        title : '信息',
	                        content : '上传头像成功',
	                        ok : '确定',
	                        handleOk(){
	                            This.$store.commit('user/USER_NAME',{ 
	                                name : This.$store.state.user.name , 
	                                userHead : res.data.data.userHead + '?' + Math.random()
	                            });
	                        }
	                    });
	                }
	                else{
	                    messageBox({
	                        title : '信息',
	                        content : '上传头像失败',
	                        ok : '确定'
	                    });
	                }
	            });
			}
	       },
	
	beforeRouteEnter (to, from, next) {
        axios.get('/api2/users/getUser').then((res)=>{
            var status = res.data.status;
            if(status === 0){
                next(vm => {
                    
                    vm.$store.commit('user/USER_NAME',{ 
                        name : res.data.data.username,
                        userHead : res.data.data.userHead
                      
                    });
                });
            }
            else{
                next('/login');
            }
        });
    }
    }

</script>


<style>
.mint-button--large {
    display: block;
    width: 100%;
    height: 35px;
    margin-top: 10px;
}
.page-navbar{
	margin-top: 10px;
	margin-bottom: 0px;
}
a{
	margin-right: 28px;
}
.userHead{ 
	width:100px; 
	height:100px; 
	border-radius: 50%; 
	overflow: hidden;
}
</style>